<!-- 全部电子书 -->
<template>
    <el-page-header @back="goBack" style="margin-left: 20px;">
        <template #content>
            <span class="text-large font-600 mr-3"> 电子书列表 </span>
        </template>
    </el-page-header>
    <el-row style="height: 760px;margin-left: -80px;">
        <el-col v-for="(item, index) in displayedData" :key="index" :span="3" :offset="index > 0 ? 2 : 2">
            <el-card :body-style="{ padding: '0px' }" class="course" @click="gobackccc(item.courseId)">
                <img :src="item.courseCover" class="image" />
                <div style="padding: 14px;text-align: center;height: 40px;">
                    <span class="crousename">{{ item.courseName }}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
        @current-change="changePage" :total="carouselData.length" style="margin-left: 528px;" />
</template>
<script>
import { ref, onMounted, computed } from 'vue'
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import router from '@/router';
export default {
    setup() {
        const carouselData = ref([]);
        const currentPage = ref(1); // 当前页码  
        const pageSize = ref(12); // 每页数据数量
        onMounted(async () => {
            try {
                const response = await axios.get('/course/findAllBooks');
                if (response.code === 200) {
                    console.log(response.data);
                    carouselData.value = response.data;
                }
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });
        function goBack() {
            router.push('/index')
        }
        const displayedData = computed(() => {
            const start = (currentPage.value - 1) * pageSize.value;
            const end = start + pageSize.value;
            return carouselData.value.slice(start, end);
        });
        function changePage(newPage) {
            currentPage.value = newPage;
        }
        function gobackccc(Item) {
            router.push("/productChild/" + Item)
        }
        return {
            gobackccc,
            carouselData,
            currentPage,
            pageSize,
            displayedData,
            goBack,
            changePage,
        };
    },
}
</script>

<style scoped>
.image {
    width: 250px;
    height: 120px;
    display: block;
}

.crousename {
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(0, 0, 0);
}

.course {
    width: 250px;
    margin-top: 30px;
    height: 190px;
    margin-left: 50px;
    cursor: pointer;
}
</style>